<template>
  <div class="component-editor">
    <el-form>
      <el-form-item label="基础组件数据类型">
        <el-select
          v-model="componentInfo.type"
          placeholder="请选择类型"
          @change="change"
        >
          <el-option
            v-for="item in newoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <component :is="currentName" :componentInfo="componentInfo" />
    </el-form>
  </div>
</template>

<script>
import components from "./components";
export default {
  computed: {
    currentName() {
      return `template` + this.componentInfo.type;
    },
  },
  components,
  name: "maliangeditor",
  props: {
    // 编辑器会传递给编辑面板组件的属性值，编辑器可以修改这些值来达到控制组件数据的作用
    componentInfo: {
      // 固定字段，收集所有属性值
      type: [Object],
      default() {},
    },
  },
  data: function () {
    return {
      newoptions: [
        {
          label: "下拉框",
          value: "Select",
        },
        {
          label: "时间",
          value: "Time",
        },
        {
          label: "输入框",
          value: "Input",
        },
        {
          label: "开关",
          value: "Switch",
        },
        {
          label: "单选框",
          value: "Radio",
        },
        {
          label: "多选框",
          value: "Checkbox",
        },
      ],
    };
  },
  watch: {
    componentInfo: {
      handler(v) {
        console.log(v, "111");
      },
      deep: true,
    },
  },
  mounted: function () {},
  methods: {
    change(val) {
      const dataObj = {
        Time: { timeType: "year", timeRange: false },
        Radio: {
          RadioIsdisabled: false,
          RadioSize: "small",
          RadioIsBorder: false,
        },
        Input: {
          maxlength: '10',
          minlength: '0',
          defaultValue: "",
          InputType: "text",
          InputIsdisabled: false,
        },
        Select: {
          SelectIsdisabled: false,
          SelectIsMultiple: false,
          SelectIsClear: false,
          SelectIsSearch: false,
        },
        Switch: {
          SwitchIsdisabled: false,
          switchOpen: "",
          switchClose: "",
        },
        Checkbox: {
          checkboxIsdisabled: false,
          checkboxSize: "small",
          checkboxBorder: false,
        },
      };
      this.$emit("changeData", { type: val, ...dataObj[val] });
    },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
.component-editor {
}
</style>
